﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>角色管理 </title>
    <link href="../static/css/admin.css?v=6" rel="stylesheet" />
    <script src="../static/js/boot.js?v=2"></script>
    <script src="../static/js/admin.js?v=2"></script>
    <link href="../static/lib/wizard/wizard.css" rel="stylesheet" />
    <script src="../static/lib/wizard/wizard.js"></script>
    <link href="../static/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="../static/lib/zTree_v3/js/jquery.ztree.all.min.js"></script>
    <script src="../static/lib/zTree_v3/demo/js/fuzzysearch.js"></script>
    <link href="../static/lib/zTree_v3/treeSelect/treeSelect.css" rel="stylesheet" />
    <script src="../static/lib/zTree_v3/treeSelect/treeSelect.js?v=3"></script>
    <style>
        #PermissionMenussso {
            width: 100%;
            height: 33px;
            margin-top: 7px;
            margin-left: 5px;
            border: 1px solid #ccc;
        }

        .select2-container {
            width: 100% !important;
        }

        .ckbox input[type="checkbox"]:checked + label::after {
            width: 12px;
        }
    </style>
    <script>
        var apiUrl = "/api/role/";
        var keyValue = $.request("keyValue");
        var selectValue = 0;
        var kty = 1;
        $(function () {
            initControl();
            console.log(keyValue);
            if (!!keyValue) {
                $.ajax({
                    url: apiUrl + "GetModel?keyValue=" + keyValue,
                    dataType: "json",
                    async: false,
                    beforeSend: function (jqXHR) {
                        jqXHR.setRequestHeader("Authorization", 'Bearer ' + window.LS.get("hdjtoken"));
                    },
                    success: function (ret) {
                        $("#form1").formSerialize(ret);
                    }
                });
            }
        })
        function initControl() {

               $('#wizard').wizard().on('change', function (e, data) {
                    var $finish = $("#btn_finish");
                    var $next = $("#btn_next");
                    if (data.direction == "next") {
                        switch (data.step) {
                            case 1:
                                if (!$('#form1').formValid()) {
                                    return false;
                                }
                                break;
                            case 2:
                                $finish.show();
                                $next.hide();
                                break;
                            default:
                                break;
                        }
                    } else {
                        $finish.hide();
                        $next.show();
                    }
                });
                MenutreeView();
                OrgtreeView();
                orgTree();
        }
        function MenutreeView() {
            var setting = {
                view: {
                    dblClickExpand: false,
                    showLine: true,
                    selectedMulti: false
                },
                check: {
				    enable: true
			    },
                data: {
                    key: {
                        name: "Name",
                    },
                    simpleData: {
                        enable: true,
                        idKey: "ID",
                        pIdKey: "ParentID",
                        rootPId: ""
                    }
                },
                callback: {
                    // 单击事件
                    onClick: function zTreeOnClick(event, treeId, treeNode) {
                        //console.log(treeNode)
                        treeNodeId = treeNode.ID;
                    }
                }
            };
            $.ajax({
                url: API_PATH + "/Menu/" + "GetAll",
                type: "get",
                dataType: "json",
                success: function (data) {
                    var zTreeObj = $.fn.zTree.init($("#PermissionMenus"), setting, data);
                    fuzzySearch('PermissionMenus', '#PermissionMenussso', null, true); //初始化模糊搜索方法
                }
            });
        }
        function OrgtreeView() {
            var setting = {
                view: {
                    dblClickExpand: false,
                    showLine: true,
                    selectedMulti: false
                },
                check: {
				    enable: true
			    },
                data: {
                    key: {
                        name: "Name",
                    },
                    simpleData: {
                        enable: true,
                        idKey: "ID",
                        pIdKey: "ParentID",
                        rootPId: ""
                    }
                },
                callback: {
                    // 单击事件
                    onClick: function zTreeOnClick(event, treeId, treeNode) {
                        //console.log(treeNode)
                        treeNodeId = treeNode.ID;
                    }
                }
            };
            $.ajax({
                url: API_PATH + "/Organize/" + "GetAll",
                type: "get",
                dataType: "json",
                success: function (data) {
                    var zTreeObj = $.fn.zTree.init($("#PermissionOrganizes"), setting, data);
                    fuzzySearch('PermissionOrganizes', '#PermissionOrganizessso', null, true); //初始化模糊搜索方法
                }
            });
        }
        function orgTree(){

            $.ajax({
                url: API_PATH + "/Organize/" + "GetAll",
                type: "get",
                dataType: "json",
                success: function (data) {
                      $(".treeSelect").treeSelect({
                        data:data,
                        inputId:"txt"
                    })
                }
            });
        }

           //是否跨部门
        function showHideBran(val)
        { 
            if (val == '1')
                $("#permissionBranTree").hide();
            else
                $("#permissionBranTree").show();
        }
        function submitForm() {
            if (!$('#form1').formValid()) {
                return false;
            }
            var aurl = apiUrl + "Add";
            if (!!keyValue) {
                aurl = apiUrl + "Update";
            }

            var zTreeObj = $.fn.zTree.getZTreeObj("PermissionMenus"); 
		    var nodes = zTreeObj.getCheckedNodes(true);
		    var ids = [];
		    for(var i=0;i<nodes.length;i++)
            {
                ids.push(nodes[i].id);
            }
		    console.log(ids.join(','))


            var postData = $("#form1").formSerialize();
            postData["OrganizeId"] =$("#txtBH").val();
            //菜单
            postData["permissionIds"] =ids;
            //部门
            postData["permissionIdsBran"] = String($("#permissionBranTree").getCheckedNodes());
            //选中的值
            var cd = $('input[name="optionsRadiosinline"]:checked').val();
            console.log(cd);



        if (cd=='1')
            postData["permissionIdsBran"] = '0';

            $.submitForm({
                url: aurl,
                param: postData,
                paramType: true,
                success: function () {
                    $.currentWindow().$("#gridList").resetSelection();
                    $.currentWindow().$("#gridList").trigger("reloadGrid");
                }
            })
        }</script>
</head>
<body style="margin:0px;padding:0px;overflow:hidden;">
    <form id="form1">
        <div class="widget-body">
            <div id="wizard" class="wizard" data-target="#wizard-steps" style="border-left: none; border-top: none; border-right: none;">
                <ul class="steps">
                    <li data-target="#step-1" class="active"><span class="step">1</span>角色信息<span class="chevron"></span></li>
                    <li data-target="#step-2"><span class="step">2</span>菜单权限<span class="chevron"></span></li>
                    <li data-target="#step-3"><span class="step">3</span>部门权限<span class="chevron"></span></li>
                </ul>
            </div>
            <div class="step-content" id="wizard-steps" style="border-left: none; border-bottom: none; border-right: none;">
                <div class="step-pane active" id="step-1" style="margin: 10px; margin-bottom: 0px;">
                    <div class="alert alert-danger" style="text-align: left; margin-bottom: 10px;">
                        <i class="fa fa-warning alert-dismissible" style="position: relative; top: 1px; font-size: 15px; padding-right: 5px;"></i>
                        请填写角色信息，用于创建或修改角色信息！
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">表单信息</h3>
                        </div>
                        <div class="panel-body" style="width: 98%;">
                            <input id="ID" name="ID" type="hidden" value="" />
                            <input id="Category" name="Category" type="hidden" value="1" />
                            <table class="form">
                                <tr>
                                    <th class="formTitle">归属组织</th>
                                    <td class="formValue">
                                        <div class="treeSelect"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="formTitle">角色名称</th>
                                    <td class="formValue">
                                        <input id="Name" name="Name" type="text" class="form-control required" placeholder="请输入角色名称" />
                                    </td>
                                </tr>
                                <tr>
                                    <th class="formTitle">角色编号</th>
                                    <td class="formValue">
                                        <input id="EnCode" name="EnCode" type="text" class="form-control required" placeholder="请输入角色编号" />
                                    </td>
                                </tr>
                                <tr>
                                    <th class="formTitle">角色类型</th>
                                    <td class="formValue">
                                        <div class="input-group">
                                            <input id="Type" name="Type" title="双击清空" value="未知" ondblclick="$('#Type').val('');" readonly="readonly" type="text" class="form-control required" placeholder="请选择" />
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" data-toggle="dropdown">
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu pull-right" style="max-height:200px;overflow:auto">
                                                    <li><a class="dropdown-item" onclick="selectOption('Type', this);">系统角色</a></li>
                                                    <li><a class="dropdown-item" onclick="selectOption('Type',this);">业务角色</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="formTitle" style="height: 35px;">选项</th>
                                    <td class="formValue" style="padding-top: 1px;">
                                        <div class="input-group">
                                            <input id="AllowEdit" name="AllowEdit" type="checkbox" value="1" /><label for="AllowEdit">允许编辑</label>
                                            <input id="AllowDelete" name="AllowDelete" type="checkbox" value="1" /><label for="AllowDelete">允许删除</label>
                                            <input id="EnabledMark" name="EnabledMark" type="checkbox" checked="checked" value="1" /><label for="EnabledMark">有效</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="formTitle" valign="top" style="padding-top: 5px;">备注</th>
                                    <td class="formValue">
                                        <textarea id="Description" name="Description" class="form-control" style="height: 60px;"></textarea>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="step-pane" id="step-2" style="margin: 10px; margin-bottom: 0px;">
                    <div class="alert alert-danger" style="text-align: left; margin-bottom: 10px;">
                        <i class="fa fa-warning alert-dismissible" style="position: relative; top: 1px; font-size: 15px; padding-right: 5px;"></i>
                        请选择角色所拥有的菜单及页面按钮权限！
                    </div>
                    <input id="PermissionMenussso" name="PermissionMenussso" value="" type="text" style="width:99%;height:25px;" placeholder="请输入关键字" />
                    <ul id="PermissionMenus" class="ztree"></ul>
                </div>
                <div class="step-pane" id="step-3" style="margin: 10px; margin-bottom: 0px;">
                    <div class="alert alert-danger" style="text-align: left; margin-bottom: 10px;">
                        <i class="fa fa-warning alert-dismissible" style="position: relative; top: 1px; font-size: 15px; padding-right: 5px;"></i>
                        请选择角色所能查看部门范围人中的权限！
                    </div>
                    <div style="margin-top:10px;">
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="optionsRadios3" onclick="showHideBran(1)" value="1" checked=checked /> 只允许查看本部门人员信息
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="optionsRadios4" onclick="showHideBran(2)" value="2" /> 允许跨部门查看人员信息
                        </label>
                    </div>
                    <div id="permissionBranTree" style="display:none;">
                        <input id="PermissionOrganizessso" name="PermissionOrganizessso" value="" type="text" style="width:99%;height:25px;" placeholder="请输入关键字" />
                        <ul id="PermissionOrganizes" class="ztree"></ul>
                    </div>
                </div>
            </div>
            <div class="form-button" id="wizard-actions">
                <a id="btn_last" disabled=disabled class="btn btn-default btn-prev">上一步</a>
                <a id="btn_next" class="btn btn-default btn-next">下一步</a>
                <a id="btn_finish" class="btn btn-default" style="display: none;" onclick="submitForm()">完成</a>
            </div>
        </div>

        <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
            <ul id="OrganizeNameztree" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
        </div>
    </form>
</body>
</html>